<template>
    <div class="container">
<!--        <div class="top">-->
<!--            <div class="left">-->
<!--                <a @click="routerback"><img src="../assets/img/back.png"><span>充值</span></a>-->
<!--            </div>-->
<!--            <div class="right">-->
<!--            </div>-->
<!--        </div>-->

        <div class="buzu" v-if="coins=='不足'">
            <p style="padding: 10px">书币余额不足</p>
            <p>阅读本章需要 <span class="ben-zh">35</span> 书币，当前余额 <span class="yu-e">{{shubi}}</span> 书币</p>
        </div>
        <div class="top_2" v-else>充值</div>
        <p class="tishi">请选择充值金额（1元=100书币）：</p>
        <div class="content">
            <div class="content_chongzhi">
                <a v-if="user_info&&user_info.ChargeTimes===0" :href="productUrl(6)" class="chongzhi">
                    <p>2元(限充一次)</p>
                    <p>200 + 100书币</p>
                    <p>多送1元</p>
                </a>
                <a :href="productUrl(1)" class="chongzhi">
                    <p>39元</p>
                    <p>3900书币</p>
                    <p>无赠送</p>
                </a>
                <a :href="productUrl(2)" class="chongzhi wushi">
                    <p>59元 <img src="../assets/img/20180820105248.png"></p><!--<img src="img/20180820110542.png">-->
                    <p>5900 + 3900书币</p>
                    <p>多送39元</p>
                </a>
                <a :href="productUrl(3)" class="chongzhi">
                    <p>100元</p><img src="../assets/img/20180820110547.png">
                    <p>10000 + 8000书币</p>
                    <p>多送80元</p>
                </a>
                <a v-if="user_info&&user_info.ChargeTimes > 0" :href="productUrl(4)" class="chongzhi">
                    <p>200元</p><img src="../assets/img/20180820110550.png">
                    <p>20000+20000书币</p>
                    <p>多送200元</p>
                </a>
            </div>
            <!--<div class="content_chongzhi">
                <div class="chongzhi">
                    <p>180元</p><img src="/html/img/20180820112559.png">
                    <p>2元一天，包季度</p>
                    <p>三个月免费看书</p>
                </div>
                <div class="chongzhi">
                    <p>260元</p><img src="/html/img/20180820112559.png">
                    <p>1.5元一天，包半年</p>
                    <p>六个月免费看书</p>
                </div>
            </div>-->
            <div class="content_chongzhi_2">
                <a :href="productUrl(5)">
                    <div>
                        <p class="nian_1"><img src="../assets/img/20180820110131.png" class="v"><span>1元/1天，包年免费看书</span></p><img src="../assets/img/20180820112559.png" class="nian-img">
                        <!--<p><img src="/html/img/20180820110131.png" class="v">VIP会员，包年免费看书</p><img src="/html/img/20180820112559.png" class="img">-->
                        <p class="nian_2">365元</p>
                        <!--<p class="san">(365元)</p>-->
                        <p class="nian_3">VIP会员，全年任性看书不限量免书币</p>
                        <!--<p>1元/1天，全年任性看书不限量免书币</p>-->
                    </div>
                </a>
            </div>
        </div>
        <div class="bottom">
            <p>温馨提示</p>
            <p>1.充值活动多充多送，最高赠送100%书币。</p>
            <p>2.1元=100书币</p>
            <p>3.<span>书币和会员皆属虚拟产品，用户一旦购买成功，不得以任何理由要求本公司退还全部或部分已充值款项，因不可抗力原因导致的情况除外。</span></p>
            <p>4.包年VIP用户看书无需消耗书币。</p>
            <p>5.使用微信支付方式前，请确认安装微信客户端。</p>
            <p>6.如遇网络问题，有可能会延迟到账，请耐心等待，1小时内未到账，请与客服联系。</p>
        </div>
        <bottom :i="icon"></bottom>
    </div>
</template>

<script>
    import bottom from './bottom'
    export default {
        name: "chongzhi",
        components:{
            bottom,
        },
        data(){
            let redirect = this.$route.query.successUrl?encodeURIComponent(this.$route.query.successUrl):encodeURIComponent(location.href);
            return{
                icon: 2,
                coins:this.$route.query.coins,
                successUrl:redirect,
                failedRedirect:redirect,
                shubi: 0,
                user_info: [],
            }
        },
        created:function(){
            this.set();
            this.$axios.get('/user-info').then(response=>{
                if(response){
                    this.user_info = response.data.user;
                    this.shubi=response.data.user.TotalCoins
                }else{
                    this.shubi = ''
                }
            })
            document.body.scrollTop = 0
            document.documentElement.scrollTop = 0
            // target.scrollIntoView()
            document.title = '充值';
        },
        methods:{
            set:function(){
                this.$emit('set',2)
            },
            //返回上一页
            routerback: function () {
                if(this.coins == '不足'){
                    location.href = this.successUrl
                }else{
                    this.$router.push({path:'/index'});
                }
                // this.$router.back(-1)
            },
            productUrl(id) {
                let url = `/buy?ProductID=`+id+
                    `&SuccessRedirect=`+this.successUrl+
                    `&FailedRedirect=`+this.failedRedirect;
                return this.$axios.defaults.linkUrl(url);
            }
        }
    }
</script>

<style scoped>
    .container {
        background: white;
        padding: 0px;
    }
    .top {
        margin-bottom: 20px;
        padding: 10px 0px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        background: #ebebeb;
    }
    .top_2{
        width: 100%;
        color: #8b0000;
        text-align: center;
        font-size: 20px;
        padding: 15px 0px;
    }
    .left a {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    a{
        text-decoration: none;
    }
    .right a {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .left a,
    .right a {
        color: black;
        text-decoration: none;
    }

    .top img {
        width: 2rem;
    }

    .top span {
        font-size: 1.1rem;
    }
    .tishi{
        font-size: 10px;
        margin: 10px 0px 0px 10px;
    }
    .buzu{
        text-align: center;
        margin-bottom: 15px;
    }
    .buzu p{
        margin: 5px;
    }
    .buzu p:nth-child(1){
        font-size: 1.1rem;
        color: #8b0000;
    }
    .buzu p:nth-child(2){
        font-size: 0.9rem;
        color: #999;
    }
    .buzu span{
        color: #ff8c00;
    }
    .content>p{
        padding: 10px;
        border-bottom: 1px solid #dddddd;
    }
    .content>p span{
        color: #ff9600;
    }
    .content_chongzhi{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 10px 15px 5px;
    }
    .chongzhi{
        width: 35%;
        border: 1px solid #e7bb78;
        cursor: pointer;
        border-radius: 5px;
        padding: 0px 20px;
        margin-bottom: 10px;
        position: relative;
        background: #fffaf2;
    }
    .chongzhi img,.nian-img{
        position: absolute;
        width: 4rem;
        top: 0px;
        right: 0px;
        border-radius:3px ;
    }
    .chongzhi>p:nth-child(1){
        font-size: 1.2rem!important;
    }
    .chongzhi>p{
        margin: 5px 0px;
        font-size: 0.9rem;
        color: #9D9D9D;
    }
    .chongzhi>p:nth-child(1){
        font-size: 1rem;
        color:black;
    }
    /*.affirm{*/
        /*background: #10aeff;*/
        /*border: 1px solid #0e9ce5;*/
        /*text-align: center;*/
        /*color: white;*/
        /*margin: 20px 10px;*/
        /*padding: 5px 0px;*/
        /*border-radius: 4px;*/
    /*}*/
    /*.weixin{*/
        /*text-align: center;*/
        /*color: green;*/
        /*margin: 10px 0px;*/
    /*}*/
    .weixin img{
        width: 2rem;
        margin-right: 10px;
    }
    .bottom{
        margin:30px 15px 30px;
        color: #5e6a94;
        font-size: 0.9rem;
    }
    .bottom p span{
        color: #5e6a94;
    }
    .content_chongzhi_2{
        padding: 0px 15px;
    }
    .content_chongzhi_2 div{
        border: 1px solid #e7bb78;
        border-radius: 5px;
        text-align: center;
        position: relative;
        padding: 5px 0px;
        color: black;
    }
    .content_chongzhi_2 p{
        margin: 5px 0px;
    }
    .nian_1{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .nian_2{
        font-size: 0.9rem;
    }
    .nian_3{
        font-size: 0.9rem;
        color: #9D9D9D;
    }
    .v{
        position: static !important;
        width: 1.5rem !important;
        margin-right: 5px;
    }
    .san{
        font-size: 1.5rem !important;
        color: black !important;
    }
    .wushi{
        background: #fedca6;
    }
    .wushi p:nth-child(1){
        position: relative;
    }
    .wushi p img{
        position: absolute;
        width: 1.8rem;
        left: 42px;
    }
    .footer {
        position: fixed;
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-around;
        font-size: 1rem;
        text-align: center;
        bottom: 0px;
        background: white;
        padding-top: 5px;
        border-top:1px solid #DDDDDD ;
    }
    .iconfont{
        font-size: 22px!important;
    }
    .footer a {
        text-decoration: none;
        color: gray;
    }
    .fen p{
        color: #3688FF;
    }
    @media (min-width: 768px) {
        .container {
            width: 750px;
        }
    }
</style>
